<template>
	<view class="cxpt">
		<!-- <div id="cxpt_chart" ref="chart" class="cxpt_chart"></div> -->
		<l-echart class="cxpt_chart" ref="chart" @finished="init"></l-echart>
		<view class="customTooltips" :style="{ left: position[0] + 'px', top: position[1] + 'px' }" v-if="params.length && position.length && showTip">
			<view>这是个自定的tooltips</view>
			<view>{{ params[0]['axisValue'] }}</view>
			<view v-for="(item, index) in params" :key="index">
				<view>
					<text>{{ item.seriesName }}</text>
					<text>{{ item.value }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as echarts from 'echarts';
import { getCXPT } from '@/api/zhyp/statistics';
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
	components: { LEchart },
	data() {
		return {
			myChart: null,
			data: {},
			XData: [],
			option: {
					tooltip: {
						trigger: 'axis',
						renderMode: 'richText',
						position: (point, params, dom, rect, size) => {
							// 假设自定义的tooltips尺寸
							const box = [170, 170];
							// 偏移
							const offsetX = point[0] < size.viewSize[0] / 2 ? 20 : -box[0] - 20;
							const offsetY = point[1] < size.viewSize[1] / 2 ? 20 : -box[1] - 20;
							const x = point[0] + offsetX;
							const y = point[1] + offsetY;

							this.position = [x, y];
							this.params = params;
						},
						formatter: '{b}:{c}'
					},
					textStyle: {
						color: '#C9C9C9'
					},
					color: [
						'rgba(27,126,242,0)',
						'rgba(27,126,242,0)',
						'rgba(27,126,242)',
						// "rgba(41,241,250)",
						'rgba(41,241,250)'
					],
					legend: {
						type: 'scroll',
						// show: false,
						// orient: "vertical",
						// selectedMode: false, //图例点击失效
						right: 0,
						top: 10,
						textStyle: {
							color: '#ffffff',
							fontSize: 14
						}
					},
					grid: {
						containLabel: false,
						left: 30,
						top: 20,
						bottom: 45,
						right: 10
					},
					xAxis: {
						type: 'category',
						data: [],
						axisLine: {
							show: false,
							lineStyle: {
								color: '#B5B5B5'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true,
							interval: 0, // 使x轴文字显示全
							rotate: 15,
							margin: 10, //刻度标签与轴线之间的距离。
							textStyle: {
								fontFamily: 'Microsoft YaHei',
								color: 'rgba(255,255,255,0.64)'
							},
							fontSize: 12
							// fontStyle: "bold",
						}
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: false,
							lineStyle: {
								color: '#B5B5B5'
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#466ABA'
							}
						},
						axisLabel: {
							textStyle: {
								fontFamily: 'Microsoft YaHei',
								color: 'rgba(255,255,255,0.64)'
							},
							fontSize: 14
						}
					},
					series: [
						{
							type: 'bar',
							data: [],
							stack: 'zs',
							type: 'bar',
							barMaxWidth: '25',
							barWidth: 50,
							itemStyle: {
								color:'rgba(27,126,242,0.5)'
								// color: {
								// 	x: 0,
								// 	y: 0,
								// 	x2: 0,
								// 	y2: 1,
								// 	type: 'linear',
								// 	global: false,
								// 	colorStops: [
								// 		{
								// 			offset: 0,
								// 			color: 'rgba(27,126,242,0.5)'
								// 		},
								// 		{
								// 			offset: 1,
								// 			color: 'rgba(27,126,242,0)'
								// 		}
								// 	]
								// }
							},
							label: {
								show: false,
								offset: [55, 0]
							},
							labelLine: {
								show: false
							}
						}
					]
				},
			showTip: false,
			position: [],
			params: [],
			code: '6103'
		};
	},
	created() {
		this.getData();
	},
	methods: {
		async getData() {
			const res = await getCXPT(this.code);
			this.XData = res.data.CXPT.map((item1) => item1.NAME);
			this.data = res.data.CXPT.map((item1) => item1.COUNT);
			this.option.xAxis.data = this.XData
			this.option.series[0].data = this.data
			this.$refs.chart.setOption(this.option)
		},
		againRender() {
			this.$refs.chart.setOption(this.option);
		},
		init() {
			this.$refs.chart.init(echarts, (chart) => {
				setTimeout(() => {
					chart.setOption(this.option);
				}, 500);
				// 监听tooltip显示事件
				chart.on('showTip', (params) => {
					this.showTip = true;
				});
				chart.on('hideTip', (params) => {
					setTimeout(() => {
						this.showTip = false;
					}, 300);
				});
			});
		}
	}
};
</script>

<style lang="scss">
.cxpt {
	height: 436rpx;
	overflow: hidden;
	.cxpt_chart {
		width: 100%;
		height: 436rpx;
	}
}
</style>
